<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body @close="cancel" width="1300px" custom-class="myDialog">
        <el-card shadow="never" class="mb20">
            <ul class="planInfo">
                <li>
                    <span class="label">四时：</span>
                    <span v-if="trainingDayInfo.fourSeasons=='beforedawn'">早晨</span>
                    <span v-else-if="trainingDayInfo.fourSeasons=='morning'">上午</span>
                    <span v-else-if="trainingDayInfo.fourSeasons=='afternoon'">下午</span>
                    <span v-else>晚上</span>
                </li>
                <li>
                    <span class="label">训练时长：</span>
                    <span>{{trainingDayInfo.startTime+' ~ '+trainingDayInfo.endTime}}</span>
                </li>
                <li>
                    <span class="label">间歇时间(分钟)：</span>
                    <span>{{trainingDayInfo.gapTim}}</span>
                </li>
                <li>
                    <span class="label">课时完成度(%)：</span>
                    <span>{{trainingDayInfo.completion*100}}</span>
                </li>
            </ul>
        </el-card>
        <div class="header-box flex">
            <div class="title-box">
                <span>全队课程要求：</span>
                <el-button type="success" size="mini" @click="callScheme">调用方案库</el-button>
            </div>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">添加训练项</el-button>
        </div>
        <div class="main-box">
            <div class="projectList flex">
                <el-card v-for="(project,index) in projectList" :index="index" :key="index">
                    <div class="header flex">
                        <div class="flex">
                            <div class="label">训练项{{Number(index+1)}}:</div>
                            <div class="name">{{project.threeLevelName}}</div>
                        </div>
                        <div>
                            <el-button type="text" size="mini" @click="handleEdit">编辑</el-button>
                            <el-button type="text" size="mini" @click="handleDelete" style="color:#F56C6C;">删除</el-button>
                        </div>
                    </div>
                    <div class="subHeader flex">
                        <div>量（次）</div>
                        <div>负荷强度</div>
                    </div>
                    <ul class="groupBox">
                        <li class="flex" v-for="(group,index) in project.groups" :index="index" :key="index">
                            <div class="label">{{Number(group.groupNo)+1}}.</div>
                            <div class="val">{{group.amount}}</div>
                            <div class="val" v-if="!project.unarmed">{{group.strength}}%</div>
                        </li>
                    </ul>
                </el-card>
            </div>
            <!-- 方案库 -->
            <div class="schemeBox" v-if="schemeShow">
                <el-row>
                    <el-col :span="7">
                        <el-card class="schemeBox-left">
                            <div class="titleBox">方案库</div>
                            <div class="schemeName" :class="{active:schemeIndex==index}" v-for="(item,index) in schemeList" :key="index" :index="index" @click="selectScheme(index)">{{item.name}}</div>
                        </el-card>
                    </el-col>
                    <el-col :span="17">
                        <el-card class="schemeBox-right">
                            <div class="schemeItem" v-for="(project,index) in schemeDetails.projectList" :key="index" :index="index">
                                <div class="threeLevelName">{{project.threeLevelName}}：</div>
                                <div class="group" v-for="(item,index) in project.groups" :key="index" :index="index">
                                    <div class="label">第{{index+1}}组</div>
                                    <div class="val">{{item.amount}}</div>
                                    <div>-</div>
                                    <div class="val">{{item.strength}}%</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-button class="confirmBtn" @click="confirmSelect">确认选择</el-button>
            </div>
        </div>
        <!-- 添加或修改训练项 -->
        <el-dialog :title="title2" :visible.sync="dialogVisibleProject" append-to-body @close="cancelProject">
            <el-form :model="form" ref="form" label-width="100px" class="formProject" :inline="true">
                <el-form-item label="训练项选择" prop="threeLevel" style="margin-left:50px">
                    <el-select v-model="form.threeLevel" placeholder="请选择训练项目" clearable size="small" style="width: 200px">
                        <el-option v-for="dict in threeLevelOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="unarmed" style="margin-left:30px;">
                    <el-checkbox v-model="form.unarmed">徒手训练</el-checkbox>
                </el-form-item>
                <el-form-item style="margin-left:30px;">
                    <el-button @click="addgroup" type="success" icon="el-icon-plus" size="small">新增组</el-button>
                </el-form-item>
                <div v-for="(item, index) in form.groups" :key="index" class="row flex">
                    <div class="label">{{'第' + Number(index+1)+'组'}}</div>
                    <el-form-item :prop="'groups.'+index+'.amount'" label="量(次)">
                        <el-input v-model="item.amount" style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item :prop="'groups.'+index+'.strength'" label="负荷强度(%)" v-if="!form.unarmed">
                        <el-input v-model="item.strength" style="width:200px"></el-input>
                    </el-form-item>
                    <i @click.prevent="removegroup(index)" :index="index" class="el-icon-remove-outline" v-if="index>0"></i>
                </div>
                <el-form-item class="btnBox flex">
                    <el-button @click="cancelProject">取消</el-button>
                    <el-button type="primary" @click="submitForm('form')">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-dialog>

</template>
<script>
export default {
    name: "courseRequire",
    // 接收父组件的值
    props: {
        courseRequireDialogVisible: Boolean
    },
    data() {
        return {
            // 弹出层标题
            title: "",
            trainingDayInfo: "",
            // 添加或修改训练项弹框隐藏属性
            dialogVisibleProject: false,
            // 添加或修改训练项弹框标题
            title2: '',
            // 三级科目下拉框
            threeLevelOptions: [],
            // 训练项目
            projectList: [
                {
                    threeLevel: 'benchPress',
                    threeLevelName: '3分钟卧推-25kg(次)25kg',
                    unarmed: false,// 是否徒手
                    groups: [
                        { groupNo: '0', amount: '60', strength: '70' },
                        { groupNo: '1', amount: '60', strength: '70' },
                        { groupNo: '2', amount: '60', strength: '70' },
                        { groupNo: '3', amount: '60', strength: '70' },
                        { groupNo: '4', amount: '60', strength: '70' },
                        { groupNo: '5', amount: '60', strength: '70' }
                    ]
                },
                {
                    threeLevel: 'wola',
                    threeLevelName: '卧拉(kg)',
                    unarmed: false,// 是否徒手
                    groups: [
                        { groupNo: '0', amount: '60', strength: '70' },
                        { groupNo: '1', amount: '60', strength: '70' },
                        { groupNo: '2', amount: '60', strength: '70' },
                        { groupNo: '3', amount: '60', strength: '70' },
                        { groupNo: '4', amount: '60', strength: '70' },
                        { groupNo: '5', amount: '60', strength: '70' }
                    ]
                },
                {
                    threeLevel: 'benchPress',
                    threeLevelName: '卧推(kg)',
                    unarmed: false,// 是否徒手
                    groups: [
                        { groupNo: '0', amount: '60', strength: '70' },
                        { groupNo: '1', amount: '60', strength: '70' },
                        { groupNo: '2', amount: '60', strength: '70' },
                        { groupNo: '3', amount: '60', strength: '70' },
                        { groupNo: '4', amount: '60', strength: '70' },
                        { groupNo: '5', amount: '60', strength: '70' }
                    ]
                },
                {
                    threeLevel: 'wola',
                    threeLevelName: '卧拉(kg)',
                    unarmed: false,// 是否徒手
                    groups: [
                        { groupNo: '0', amount: '60', strength: '70' },
                        { groupNo: '1', amount: '60', strength: '70' },
                        { groupNo: '2', amount: '60', strength: '70' },
                        { groupNo: '3', amount: '60', strength: '70' },
                        { groupNo: '4', amount: '60', strength: '70' },
                        { groupNo: '5', amount: '60', strength: '70' }
                    ]
                },
                // {
                //     threeLevel: 'benchPress',
                //     threeLevelName: '卧推(kg)',
                //     unarmed: false,// 是否徒手
                //     groups: [
                //         { groupNo: '0', amount: '60', strength: '70' },
                //         { groupNo: '1', amount: '60', strength: '70' },
                //         { groupNo: '2', amount: '60', strength: '70' },
                //         { groupNo: '3', amount: '60', strength: '70' },
                //         { groupNo: '4', amount: '60', strength: '70' },
                //         { groupNo: '5', amount: '60', strength: '70' }
                //     ]
                // },
                // {
                //     threeLevel: 'wola',
                //     threeLevelName: '卧拉(kg)',
                //     unarmed: false,// 是否徒手
                //     groups: [
                //         { groupNo: '0', amount: '60', strength: '70' },
                //         { groupNo: '1', amount: '60', strength: '70' },
                //         { groupNo: '2', amount: '60', strength: '70' },
                //         { groupNo: '3', amount: '60', strength: '70' },
                //         { groupNo: '4', amount: '60', strength: '70' },
                //         { groupNo: '5', amount: '60', strength: '70' }
                //     ]
                // }
            ],
            form: {
                unarmed: false,
                groups: [
                    { groupNo: undefined, amount: undefined, strength: undefined }
                ]
            },
            schemeList: [
                { id: 1, name: '最大力量体能大比拼训练方案-02-12', threeLevel: 'benchPress', threeLevelName: '3分钟卧推-25kg(次)25kg', unarmed: false },
                { id: 2, name: '最大力量体能大比拼训练方案-02-13', threeLevel: 'benchPress', threeLevelName: '3分钟卧推-25kg(次)25kg', unarmed: false },
                { id: 3, name: '最大力量体能大比拼训练方案-02-14', threeLevel: 'benchPress', threeLevelName: '3分钟卧推-25kg(次)25kg', unarmed: false },
                { id: 4, name: '最大力量体能大比拼训练方案-02-15', threeLevel: 'benchPress', threeLevelName: '3分钟卧推-25kg(次)25kg', unarmed: false },
            ],
            schemeDetails: {
                name: '最大力量体能大比拼训练方案-02-12',
                projectList: [
                    {
                        threeLevel: 'benchPress',
                        threeLevelName: '卧推',
                        unarmed: false,// 是否徒手
                        groups: [
                            { groupNo: '0', amount: '60', strength: '70' },
                            { groupNo: '1', amount: '60', strength: '70' },
                            { groupNo: '2', amount: '60', strength: '70' },
                            { groupNo: '3', amount: '60', strength: '70' },
                            { groupNo: '4', amount: '60', strength: '70' },
                            { groupNo: '5', amount: '60', strength: '70' }
                        ]
                    },
                    {
                        threeLevel: 'benchPress',
                        threeLevelName: '卧推',
                        unarmed: false,// 是否徒手
                        groups: [
                            { groupNo: '0', amount: '60', strength: '70' },
                            { groupNo: '1', amount: '60', strength: '70' },
                            { groupNo: '2', amount: '60', strength: '70' },
                            { groupNo: '3', amount: '60', strength: '70' },
                            { groupNo: '4', amount: '60', strength: '70' },
                            { groupNo: '5', amount: '60', strength: '70' }
                        ]
                    }
                ]
            },
            // 所选方案列表下标
            schemeIndex: 0,
            // 显示方案
            schemeShow: false
        }
    },
    computed: {
        dialogVisible: {
            set(val) {
                this.$emit('close', val) // 将子组件dialogVisible改变的值传递给父组件
            },
            get() {
                return this.courseRequireDialogVisible // 表示获取父组件的值
            }
        }
    },
    created() {

    },
    methods: {
        // 调用方案
        callScheme() {
            this.schemeShow = true
        },
        // 切换方案
        selectScheme(index) {
            this.schemeIndex = index
        },
        // 确认方案
        confirmSelect() {
            this.schemeShow = false
        },
        // 查看或者编辑课程
        handleCourse(trainingDayInfo) {
            this.title = trainingDayInfo.firstLevelName + '--' + trainingDayInfo.secondLevelName
            this.trainingDayInfo = trainingDayInfo
            //二级训练项目字典
            this.getDicts(this.trainingDayInfo.secondLevel).then(response => {
                this.threeLevelOptions = response.data;
            });
        },
        // 取消按钮
        cancel() {
            this.dialogVisible = false;
        },
        // 表单重置
        reset() {
            this.form = {
                unarmed: false,
                groups: [
                    { groupNo: undefined, amount: undefined, strength: undefined }
                ]
            };
            this.resetForm("form");
        },
        // 添加训练项目
        handleAdd() {
            this.reset();
            this.dialogVisibleProject = true;
            this.title2 = this.trainingDayInfo.firstLevelName + '--' + this.trainingDayInfo.secondLevelName
        },
        // 编辑训练项目
        handleEdit() {
            this.reset();
            this.dialogVisibleProject = true;
            this.title2 = this.trainingDayInfo.firstLevelName + '--' + this.trainingDayInfo.secondLevelName
        },
        // 删除训练项目
        handleDelete() {

        },
        // 取消添加或修改训练项弹框
        cancelProject() {
            this.dialogVisibleProject = false;
            // this.reset();
        },
        submitForm(formName) {

        },
        // 组序号排序
        setGroupNo() {
            const groups = this.form.groups
            groups.forEach((value, index) => {
                value.groupNo = index
            })
            this.form.groups = groups
        },
        removegroup(index) {
            this.form.groups.splice(index, 1)
            this.setGroupNo()
        },
        addgroup() {
            this.form.groups.push({ groupNo: undefined, amount: undefined, strength: undefined });
            this.setGroupNo()
        }
    }
}
</script>
<style lang="scss" scoped>
.planInfo {
    padding: 0;
    margin: 0;
    li {
        float: left;
        list-style: none;
        color: #666;
        min-width: 200px;
        margin: 10px 30px;
        .label {
            font-size: 14px;
            color: #606266;
            font-weight: bold;
        }
    }
}
.planInfo::after {
    display: block;
    clear: both;
    content: "";
}
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-box {
    font-weight: bold;
    justify-content: space-between;
    .title-box {
        color: #409eff;
        font-size: 16px;
        margin-right: 30px;
    }
}
.main-box {
    min-height: 20vh;
    max-height: 70vh;
    overflow: auto;
    .projectList {
        flex-wrap: wrap;
        justify-content: flex-start;
        .el-card {
            font-size: 14px;
            width: 24%;
            margin-right: 15px;
            margin-top: 15px;
            .header {
                justify-content: space-between;
                .label {
                    color: #606266;
                    font-weight: bold;
                }
                .name {
                    color: #409eff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    max-width: 130px;
                }
            }
            .subHeader {
                div {
                    color: #909399;
                    margin: 15px 30px;
                }
            }
            .groupBox {
                padding: 0;
                margin: 0;
                height: 180px;
                overflow: auto;
                li {
                    align-items: flex-end;
                    .label {
                        color: #909399;
                        width: 2%;
                    }
                    .val {
                        text-align: center;
                        width: 35%;
                        border-bottom: 1px solid #dcdfe6;
                        color: #606266;
                        height: 30px;
                        line-height: 30px;
                        margin: 0 20px;
                    }
                }
            }
        }
        .el-card:nth-child(4n) {
            margin-right: 0;
        }
    }
    .schemeBox {
        background: #b3e5fb;
        margin-top: 20px;
        border-radius: 10px;
        padding: 15px;
        .schemeBox-left {
            height: 200px;
            overflow: auto;
            margin-right: 15px;
            background: #e1f5fd;
            .titleBox {
                color: #606266;
                font-weight: bold;
                font-size: 16px;
                text-align: center;
                margin-bottom: 10px;
            }
            .schemeName {
                text-align: center;
                height: 30px;
                line-height: 30px;
                cursor: pointer;
            }
            .schemeName.active {
                background: #b9e7fb;
            }
        }
        .schemeBox-right {
            height: 200px;
            overflow: auto;
            background: #e1f5fd;
            .schemeItem {
                display: flex;
                align-items: center;
                .threeLevelName {
                    flex-shrink: 0;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    width: 100px;
                    color: #409eff;
                }
                .group {
                    display: flex;
                    align-items: center;
                    margin: 5px 15px;
                    .label {
                        width: 50px;
                    }
                    .val {
                        width: 50px;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        border: 1px solid #999;
                        border-radius: 5px;
                        margin: 0 5px;
                    }
                }
            }
        }
        .confirmBtn {
            display: block;
            margin: 20px auto 0;
            background: #169bd5;
            color: #fff;
            border-radius: 10px;
            border: none;
        }
    }
}
.formProject {
    padding: 30px 0 0 30px;
    .row {
        justify-content: flex-start;
        .label {
            margin-bottom: 22px;
            color: #409eff;
            font-size: 15px;
            min-width: 50px;
        }
        .el-icon-remove-outline {
            margin-bottom: 22px;
            margin-left: 20px;
            font-weight: bold;
            color: #f56c6c;
            font-size: 20px;
            cursor: pointer;
        }
    }
    .btnBox {
        justify-content: flex-end;
        margin: 30px 50px;
    }
}
</style>